﻿@page "/chart/range-column"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-column-chart'>Blazor Range Column Chart</a> example visualizes the maximum and minimum temperatures for a week of different countries with default range column series in the chart.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the range column type chart. The range column type chart is used to display a range of data by plotting two Y-values per data point. Each Y-value used in the range column chart is drawn as the upper and lower bounds of a column.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the range column series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/range-column'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Temperature Variation" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis LabelFormat="{value}˚C" EdgeLabelPlacement="EdgeLabelPlacement.Shift" Maximum="20">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Days" High="IND_HighTemp" Low="IND_LowTemp" Name="India" Type="ChartSeriesType.RangeColumn">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" XName="Days" High="GER_HighTemp" Low="GER_LowTemp" Name="Germany" Type="ChartSeriesType.RangeColumn">
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<RangeColumnChartData> ChartPoints = new List<RangeColumnChartData>
    {
        new RangeColumnChartData { Days = "Sun", IND_LowTemp = 3.1, IND_HighTemp = 10.8, GER_LowTemp = 2.5, GER_HighTemp = 9.8  },
        new RangeColumnChartData { Days = "Mon", IND_LowTemp = 5.7, IND_HighTemp = 14.4, GER_LowTemp = 4.7, GER_HighTemp = 11.4  },
        new RangeColumnChartData { Days = "Tue", IND_LowTemp = 8.4, IND_HighTemp = 16.9, GER_LowTemp = 6.4, GER_HighTemp = 14.4  },
        new RangeColumnChartData { Days = "Wed", IND_LowTemp = 10.6, IND_HighTemp = 19.2, GER_LowTemp = 9.6, GER_HighTemp = 17.2 },
        new RangeColumnChartData { Days = "Thu", IND_LowTemp = 8.5, IND_HighTemp = 16.1, GER_LowTemp = 7.5, GER_HighTemp = 15.1 },
        new RangeColumnChartData { Days = "Fri", IND_LowTemp = 6.0, IND_HighTemp = 12.5, GER_LowTemp = 3.0, GER_HighTemp = 10.5 },
        new RangeColumnChartData { Days = "Sat", IND_LowTemp = 1.5, IND_HighTemp = 6.9, GER_LowTemp = 1.2, GER_HighTemp = 7.9  }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class RangeColumnChartData
    {
        public string Days { get; set; }
        public double IND_LowTemp { get; set; }
        public double IND_HighTemp { get; set; }
        public double GER_LowTemp { get; set; }
        public double GER_HighTemp { get; set; }
    }
}
